<template>
  <div class="echartDemo">
    <div class="wrap" style="position: relative;">
      <div id="map" style="width: 100%; height: 800px;">
        <div :style="{ height: '400px', width: '100%' }" ref="myEchart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/province/beijing";
import AreaData from "./data";
import EchartsOption from "./optionConfig";
export default {
  name: "EchartsDemo",
  props: {
    areaData: {
      type: Array,
      default() {
        return new AreaData();
      }
    },
    option: {
      type: Object,
      default() {
        return new EchartsOption();
      }
    },
    colorList: {
      type: Array,
      default() {
        return ["#F4E001", "#F0805A", "#26C0C0"];
      }
    }
  },
  data() {
    return {
      myChart: null,
      // 地区坐标
      areaItems: {
        东城区: [116.418757, 39.937544],
        西城区: [116.366794, 39.910309],
        朝阳区: [116.486409, 39.991489],
        丰台区: [116.286968, 39.863642],
        石景山区: [116.170445, 39.974601],
        海淀区: [116.280316, 40.039074],
        门头沟区: [115.905381, 40.009183],
        房山区: [115.701157, 39.735535],
        通州区: [116.758603, 39.802486],
        顺义区: [116.753525, 40.128936],
        昌平区: [116.235906, 40.318085],
        大兴区: [116.338033, 39.658908],
        怀柔区: [116.607122, 40.524272],
        平谷区: [117.112335, 40.244783],
        密云区: [116.943352, 40.477362],
        延庆区: [115.985006, 40.465325]
      },
      selfAreaData: new AreaData(),
      selfOption: new EchartsOption()
    };
  },

  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.selfAreaData = JSON.parse(JSON.stringify(this.areaData));
      this.selfOption = JSON.parse(JSON.stringify(this.option));
      this.selfColor = JSON.parse(JSON.stringify(this.colorList));
      this.myChart = echarts.init(this.$refs.myEchart);
      window.onresize = this.myChart.resize;
      this.myChart.setOption(this.option);
      // 拖拽跟缩放重置
      let throttledRenderEachCity = this.throttle(this.renderItems, 0);
      this.myChart.on("geoRoam", throttledRenderEachCity);
      this.renderItems();
    },
    // 缩放和拖拽
    throttle(fn, delay, debounce) {
      var currCall;
      var lastCall = 0;
      var lastExec = 0;
      var timer = null;
      var diff;
      var scope;
      var args;
      delay = delay || 0;
      function exec() {
        lastExec = new Date().getTime();
        timer = null;
        fn.apply(scope, args || []);
      }

      var cb = function() {
        currCall = new Date().getTime();
        scope = this;
        args = arguments;
        diff = currCall - (debounce ? lastCall : lastExec) - delay;

        clearTimeout(timer);

        if (debounce) {
          timer = setTimeout(exec, delay);
        } else {
          if (diff >= 0) {
            exec();
          } else {
            timer = setTimeout(exec, -diff);
          }
        }

        lastCall = currCall;
      };

      return cb;
    },
    // 填充 地图点位
    renderItems() {
      var option = Object.assign(this.option, {
        xAxis: [],
        yAxis: [],
        grid: [],
        series: [],
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "none"
          }
        }
      });
      this.areaData.forEach((item, idx) => {
        let nodeCoord = this.areaItems[item.areaName];
        let coord = this.myChart.convertToPixel("geo", nodeCoord);
        let titleItems = item.DateItems.map(i => i.title);
        let itemData = item.DateItems.map(i => Number(i.value));
        option.xAxis.push({
          id: idx + item.areaName,
          gridId: idx + item.areaName,
          type: "category",
          name: item.areaName,
          nameLocation: "middle",
          nameGap: 3,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: "#666"
            }
          },
          data: titleItems,
          z: 100
        });
        option.yAxis.push({
          id: idx + item.areaName,
          gridId: idx + item.areaName,
          type: "value",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "red"
            }
          },
          min: 0,
          max: "dataMax"
        });
        option.grid.push({
          id: idx + item.areaName,
          width: 30,
          height: 40,
          left: coord[0] - 15,
          top: coord[1] - 15,
          z: 100
        });
        option.series.push({
          id: idx + item.areaName,
          type: "bar",
          xAxisId: idx + item.areaName,
          yAxisId: idx + item.areaName,
          barGap: 0,
          barCategoryGap: 0,
          data: itemData,
          z: 100,
          itemStyle: {
            normal: {
              color: params => {
                // build a color map as your need.
                let color = this.selfColor[params.dataIndex];
                return color;
              }
            },
            opacity: 0,
            emphasis: {
              label: {
                show: false
              }
            }
          }
        });
      });
      this.myChart.setOption(option);
    }
  }
};
</script>

<style></style>
